<template>
	<view class="kefang_out">
		<view class="top_box">
			<view class="addbtn"><u-button @click="show_add()" class="custom-style" text="录入客房"></u-button></view>
		</view>
		

		<view class="table_box">
			<uni-table border stripe emptyText="暂无更多数据">
				<!-- 表头行 -->
				<uni-tr>
					<uni-th width="40" align="center">房号</uni-th>
					<uni-th width="40" align="center">价格</uni-th>
					<uni-th width="80" align="left">状态</uni-th>
					<uni-th width="80" align="left">操作</uni-th>
				</uni-tr>
				<!-- 表格数据行 -->
				<uni-tr v-for="(item, index) in list" :key="index">
					<uni-td><u--image style="display: inline-block;position: relative;top: 5rpx;" 
					:showLoading="true" src="../../static/fangjian.png" width="32rpx" height="32rpx" @click="click"></u--image>
					
					<text style="padding-left: 5rpx;"> {{item.roomnum}}</text> </uni-td>
					<uni-td style="color: red;">
					￥ {{item.room_price}}
					
					</uni-td>
					<uni-td>
					<u-tag  v-if="item.roomstate==0?true:false" plain style="width: 80rpx;text-align: center;" size="mini" text="空房" type="success"></u-tag>
					<u-tag  v-if="item.roomstate==1?true:false" plain style="width: 110rpx;text-align: center;" size="mini" text="已预约"></u-tag>
					
					<u-tag v-if="item.roomstate==2?true:false" plain style="width: 100rpx;text-align: center;" size="mini" text="已入住" type="error"></u-tag>
					
					
					</uni-td>
					
					<uni-td>
						<u-button @click="detail(item)" style="width: 120rpx;margin: 10rpx 0;" 
						size="mini"   text="房间详情"></u-button>
						<u-button @click="edit_show_add(item)" style="width: 120rpx;margin: 10rpx 0;"
						size="mini"   text="修改"></u-button>
						
						<u-button @click="tuifang(item,0,'quxiao')" v-if="item.roomstate==1?true:false" 
						style="width: 120rpx;margin: 10rpx 0;" size="mini" type="error"  text="取消"></u-button>
						<u-button @click="tuifang(item,2,'ruzhu')" v-if="item.roomstate==1?true:false" 
						style="width: 120rpx;margin: 10rpx 0;" size="mini" type="success" text="入住"></u-button>
						
						<u-button @click="tuifang(item,0,'tuifang')" v-if="item.roomstate==2?true:false"
						 style="width: 120rpx;margin: 10rpx 0;" size="mini" type="primary" text="退房"></u-button>
						
						<!-- <u-button style="width: 120rpx; margin: 10rpx 0;"  size="mini" type="error" text="删除房间"></u-button> -->
					</uni-td>
				</uni-tr>
			</uni-table>
		
		
		</view>
		
		
		<u-popup round="10" closeable mode="center" :show="poup_show" @close="close" >
			<view class="popup_box">
				<view class="tit">录入房间</view>
				<!-- account: '',
				day_nums: '',
				reasons: '' -->
				<view class="contnet_box">
					<u-form>
						<view class="item_input">
							<view class="label">房间图片</view>
							<div style="margin: 0 auto;display: block;">
								
							
							<u-upload :fileList="fileList1" @afterRead="afterRead1" 
							@delete="deletePic1" name="1" :maxCount="1" 
							style="margin: 0 auto;display: block;"
							multiple width="100" height="80">
										</u-upload>
										</div>
						</view>
					
					
						<view class="item_input">
							<view class="label">房间号 &nbsp;&nbsp; &nbsp;</view>
							<view class="input"><u--input placeholder="请输入房间号" 
							border="surround" v-model="addForm.roomnum"></u--input></view>
						</view>
		<view class="item_input">
			<view class="label">房间价格</view>
			<view class="input"><u--input placeholder="请输入房间价格" 
			type="number"
			border="surround" v-model="addForm.room_price"></u--input></view>
		</view>
		
		<view class="item_input">
			<u-form-item labelWidth="100" label="房间类型" borderBottom @click="showsbuject = true" ref="item1">
				<u--input v-model="addForm.room_type" disabled disabledColor="#ffffff" placeholder="请选择房间类目" border="none"></u--input>
				<u-icon slot="right" name="arrow-right"></u-icon>
			</u-form-item>
		</view>
						
						<view class="add_btn" style="margin:40upx"><u-button
						 type="success" style="width: 320upx;height: 70upx;" text="确定" @click="add"></u-button></view>
					</u-form>
				</view>
			</view>
		</u-popup>
		
		
		<u-popup round="10" closeable mode="center" :show="edit_poup_show" @close="edit_close" >
			<view class="popup_box">
				<view class="tit">录入房间</view>
				<!-- account: '',
				day_nums: '',
				reasons: '' -->
				<view class="contnet_box">
					<u-form>
						<view class="item_input">
							<view class="label">房间图片</view>
							<div style="margin: 0 auto;display: block;">
								
							
							<u-upload :fileList="edit_fileList1" @afterRead="edit_afterRead1" 
							@delete="edit_deletePic1" name="1" :maxCount="1" 
							style="margin: 0 auto;display: block;"
							multiple width="100" height="80">
							<image :src="editForm.room_img" mode="widthFix" style="width: 100px;height: 80px;"></image>
										</u-upload>
										</div>
						</view>
						<view class="item_input">
							
							<view class="label">房间号 &nbsp;&nbsp; &nbsp;</view>
							<view class="input"><u--input disabled placeholder="请输入房间号" 
							border="surround" v-model="editForm.roomnum"></u--input></view>
						</view>
		<view class="item_input">
			<view class="label">房间价格</view>
			<view class="input"><u--input placeholder="请输入房间价格" 
			type="number"
			border="surround" v-model="editForm.room_price"></u--input></view>
		</view>
		
		<view class="item_input">
			<u-form-item labelWidth="100" label="房间类型" borderBottom @click="showsbuject = true" ref="item1">
				<u--input v-model="editForm.room_type" disabled disabledColor="#ffffff" placeholder="请选择房间类目" border="none"></u--input>
				<u-icon slot="right" name="arrow-right"></u-icon>
			</u-form-item>
		</view>
						
						<view class="add_btn" style="margin:40upx"><u-button
						 type="success" style="width: 320upx;height: 70upx;" text="确定" @click="edit_sure"></u-button></view>
					</u-form>
				</view>
			</view>
		</u-popup>
		
		<u-action-sheet
						:show="showsbuject"
						:actions="actions"
						title="请选择服务类目"
						@close="showsbuject = false"
						@select="Select"
				>
				</u-action-sheet>
				
				<u-action-sheet
								:show="edit_showsbuject"
								:actions="actions"
								title="请选择服务类目"
								@close="edit_showsbuject = false"
								@select="edit_Select"
						>
						</u-action-sheet>
	</view>
</template>

<script>
import { Request2 } from '@/until/api.js';
export default {
	data() {
		return {
			fileList1: [],
			edit_showsbuject:false,
			edit_fileList1: [],
			list: [],
			addForm: {
				roomnum: '',
				room_price: '',
				room_type:"",
				room_img:""
			},
			poup_show: false,
			
			editForm: {
				
			},
			edit_poup_show: false,
		
			showsbuject:false,
			actions: [
						],
		};
	},
	onShow() {
		this.getlist();
		this.getlist_fuwu()
	},
	methods: {
		async edit_sure(){
			var requsetdata={
				...this.editForm
			}
			var res = await Request2('/fangjian/editROOM_INFO', 'post', requsetdata);
			if(res.data.code=="200"){
				this.addForm={
					roomnum: '',
					room_price: ''
				}
				this.edit_poup_show=false;
				this.$u.toast("录入房间成功!");
				this.getlist()
			}else{
				this.$u.toast(res.data.msg);
			}
			
			
		},
		detail(item){
			uni.navigateTo({
				url:'/pages/kefang/detail?data='+JSON.stringify(item)
			})
		},
		// 删除图片
		deletePic1(event) {
			this[`fileList${event.name}`].splice(event.index, 1);
			var arry = [];
			this.fileList1.filter((v, i) => {
				arry.push(v.url);
			});
			this.addForm.room_img = arry[0];
			console.log(this.addForm.room_img, '1');
		},
		// 新增图片
		async afterRead1(event) {
			// 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
			let lists = [].concat(event.file);
			let fileListLen = this[`fileList${event.name}`].length;
			lists.map(item => {
				this[`fileList${event.name}`].push({
					...item,
					status: 'uploading',
					message: '上传中'
				});
			});
			for (let i = 0; i < lists.length; i++) {
				const result = await this.uploadFilePromise1(lists[i].url);
				let item = this[`fileList${event.name}`][fileListLen];
				this[`fileList${event.name}`].splice(
					fileListLen,
					1,
					Object.assign(item, {
						status: 'success',
						message: '',
		
						url: result
					})
				);
				fileListLen++;
			}
			var arry = [];
			this.fileList1.filter((v, i) => {
				arry.push(v.url);
			});
			this.addForm.room_img = arry[0];
			console.log(this.addForm.room_img, '1');
		},
		
		// 删除图片
		edit_deletePic1(event) {
			this[`fileList${event.name}`].splice(event.index, 1);
			var arry = [];
			this.fileList1.filter((v, i) => {
				arry.push(v.url);
			});
			tthis.editForm.room_img = arry[0];
			console.log(this.addForm.room_img, '1');
		},
		// 新增图片
		async edit_afterRead1(event) {
			// 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
			let lists = [].concat(event.file);
			let fileListLen = this[`fileList${event.name}`].length;
			lists.map(item => {
				this[`fileList${event.name}`].push({
					...item,
					status: 'uploading',
					message: '上传中'
				});
			});
			for (let i = 0; i < lists.length; i++) {
				const result = await this.uploadFilePromise1(lists[i].url);
				let item = this[`fileList${event.name}`][fileListLen];
				this[`fileList${event.name}`].splice(
					fileListLen,
					1,
					Object.assign(item, {
						status: 'success',
						message: '',
		
						url: result
					})
				);
				fileListLen++;
			}
			var arry = [];
			this.fileList1.filter((v, i) => {
				arry.push(v.url);
			});
			this.editForm.room_img = arry[0];
			
		},
		
		uploadFilePromise1(url) {
			return new Promise((resolve, reject) => {
				let a = uni.uploadFile({
					url: 'http://localhost:8080/api/upload/postimage', //oss域名自己设
					filePath: url,
					name: 'file',
					formData: {
						user: 'test'
					},
					success: res => {
						setTimeout(() => {
							
							resolve(JSON.parse(res.data).url);
						}, 1000);
					}
				});
			});
		},
		edit_Select(e){
			this.editForm.room_type = e.name
		},
		     Select(e) {
							this.addForm.room_type = e.name
							
						},
		//获取服务类目列表
		async getlist_fuwu() {
			var requsetdata = {
				
			};
			var res = await Request2('/fangjian/rommTypeList', 'post', requsetdata);
			this.actions = res.data.data;
			
		},
		// 退房
		async tuifang(item,index,status_){
			var requsetdata={
				id:item.id,
				...item,
				status_:status_,
				roomstate:index
			}
			var res = await Request2('/fangjian/edit', 'post', requsetdata);
			if(res.data.code=="200"){
				
			
				this.$u.toast("操作成功!");
				this.getlist()
			}else{
				this.$u.toast(res.data.msg);
			}
		},
		async add() {
			if(this.addForm.roomnum==""){
				this.$u.toast("房间号不可以为空!");
				return false
			}
			else if(this.addForm.room_price==""){
				this.$u.toast("房间价格不可以为空!");
				return false
			}
			var requsetdata = {
				...this.addForm
			};
			var res = await Request2('/fangjian/add', 'post', requsetdata);
			if(res.data.code=="200"){
				this.addForm={
					roomnum: '',
					room_price: ''
				}
				this.poup_show=false;
				this.$u.toast("录入房间成功!");
				this.getlist()
			}else{
				this.$u.toast(res.data.msg);
			}
			
		},
		show_add() {
			this.poup_show = true;
		},
		close() {
			this.poup_show = false;
		},
		
		edit_show_add(item) {
			this.editForm=item;
			this.edit_poup_show = true;
		},
		edit_close() {
			this.edit_poup_show = false;
		},
		
		
		
		
		//获取列表
		async getlist() {
			var requsetdata = {
				pageNum: 1,
				pageSize: 999
			};
			var res = await Request2('/fangjian/list', 'post', requsetdata);
			this.list = res.data.data;
			
		}
	}
};
</script>

<style lang="scss" scoped>
.top_box {
	margin: 20rpx;
	.addbtn {
		width: 150rpx;
		height: 80rpx;
	}
}
.popup_box {
	// background-color: #fff;
	width: 600upx;
	min-height: 600upx;

	overflow: hidden;

	box-sizing: border-box;
	// padding: 0 0upx;
	.contnet_box {
		padding: 20upx 20upx;
		.item_input {
			display: flex;
			justify-content: space-between;
			padding:  0 20upx;
			width: 100%;
			box-sizing: border-box;
			// text-align: center;

			margin: 15upx 0;
			.label {
				line-height: 60upx;
			}
		}
	}

	.tit {
		text-align: center;
		margin-top: 40upx;
		font-size: 38upx;
		font-weight: 500;
	}
	.tips {
		margin: 60upx 0;
		color: #c2c2c2;
		font-size: 34upx;
		letter-spacing: 2upx;
	}
	.code {
		padding: 0;
		padding-left: 15upx;
	}
}

</style>
